<template>
    <div>
       <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>电影管理</el-breadcrumb-item>
         <el-breadcrumb-item>电影列表</el-breadcrumb-item>
         <el-breadcrumb-item>电影修改</el-breadcrumb-item>
     </el-breadcrumb>
     <el-divider></el-divider>

        <el-row>
            <el-col :span="12">      
 <el-form ref="form" :model="form" :rules="rules" label-width="80px">
  <el-form-item label="电影封面" prop="cover">
 <el-upload
  class="avatar-uploader"
  action="http://localhost:9000/upload"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <el-image v-if="form.cover" :src="form.cover" class="avatar" fit='cover' />
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
 <el-form-item label="电影类别" prop="category_id">
    <el-radio-group v-model="form.category_id">
      <el-radio :label="1">热映</el-radio>
      <el-radio :label="2">待映</el-radio>
      <el-radio :label="3">经典</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="电影名称" prop="title">
    <el-input v-model="form.title"></el-input>
  </el-form-item>
   <el-form-item label="电影类型" prop="type">
    <el-select v-model="form.type" multiple placeholder="请选择">
    <el-option 
    v-for="item in types"
    :key="item.id"
    :label="item.typename" 
    :value="item.typename"
    ></el-option>
   </el-select>
  </el-form-item>
   <el-form-item label="电影主演" prop="star_actor">
     <el-select
    v-model="form.star_actor"
    multiple
    filterable
    remote
    reserve-keyword
    placeholder="电影主演姓名"
    :remote-method="loadActorByNname"
    :loading="loadingActor">
    <el-option
      v-for="item in actorList"
      :key="item.id"
      :label="item.actor_name"
      :value="item.actor_name">
    </el-option>
  </el-select>
  </el-form-item>
     <el-form-item label="上映时间" prop="showingon">
            <el-date-picker
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              v-model="form.showingon"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
   <el-form-item label="电影评分" prop="score">
    <el-input v-model="form.score"></el-input>
  </el-form-item>
    <el-form-item label="电影时长" prop="duration">
    <el-input v-model="form.duration"></el-input>
  </el-form-item>
 <el-form-item label="电影简介" prop="description">
    <el-input type="textarea" v-model="form.description"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onUpdate">立即修改</el-button>
    <el-button @click="reset">取消</el-button>
  </el-form-item>
</el-form>
            </el-col>
        </el-row>
      
    </div>
</template>

<script>
    export default {
         data() {
      return {
        loadingActor:false,//用于绑定是否正在加载演员列表
        actorList:'',//保存演员列表
        types:'',//用于存储电影数据类型
        form: {
          id:this.$route.params.id,
          cover:'',  //用于绑定电影封面数据
          category_id:1, //用于绑定电影类别
          title: '',  //电影名称
          type: '', //电影类型
          star_actor: '',//电影主演
          showingon: '',//上映时间
          score:'', //电影评分
          duration:'',//电影时长
          description: '',//电影简介
        },
        rules:{ //用于表单中数据的表单验证
              // 定义表单中每一个表单组件的验证规则
        cover: [{ required: true, message: "请选择封面图片", trigger: "blur" }],
        title: [{ required: true, message: "请填写标题", trigger: "blur" }],
        type: [{ required: true, message: "请填写电影类型", trigger: "blur" }],
        starActor: [{ required: true, message: "请填写主演", trigger: "blur" }],
        showingon: [
          { required: true, message: "请选择上映时间", trigger: "blur" },
        ],
        score: [{ required: true, message: "请填写评分", trigger: "blur" }],
        duration: [
          { required: true, message: "请填写电影时长", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请填写电影简介", trigger: "blur" },
        ],
      },
      }},
    methods: {
        /**
         * 用于模糊查询演员列表添加电影主演
         */
        loadActorByNname(query){
            this.loadingActor = true
            this.$http.actorApi.Search({name:query}).then(result => {
            this.actorList = result.data.data
            this.loadingActor = false
            })
        },
      //取消修改
      reset(){
          this.$router.push('/home/movie-list');
      },
       /**
             * 上传成功后 回显图片
             */
             handleAvatarSuccess(res, file) {
                console.log(res)
               if(res.code == 200){
                this.form.cover = res.data
               }
            },
            /**
             * 处理上传之前的图片
             */
             beforeAvatarUpload(file) {
               const isJPG = file.type === 'image/jpeg';
               const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                   this.$message.error('上传头像图片只能是 JPG 格式!');
            }
                if (!isLt2M) {
                   this.$message.error('上传头像图片大小不能超过 2MB!');
            }
               return isJPG && isLt2M;
         },
         //获取电影类型列表
         MovieTypes(){
            this.$http.movieapi.ListMovieTypes().then(result => {
                if(result.data.code == 200){
                this.types = result.data.data
                this.form.star_actor = this.form.star_actor.split('/')
                this.form.type = this.form.type.split('/')
                }
            })
         },
         //当钱电影的详细信息，回填表单
         loadMovieInfo(){
            this.$http.movieapi.loadmovieinfo({id:this.$route.params.id}).then(res => {
              this.form = res.data.data
            })
         },
         //点击修改电影信息
          onUpdate() {
        this.form.type = this.form.type.join('/')
        this.form.star_actor = this.form.star_actor.join('/')
        console.log(this.form)
        this.$refs['form'].validate((valid) => {
          if (valid) {
           this.$confirm('是否要修改该电影？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$http.movieapi.update(this.form).then(res => {
            console.log(res)
            if(res.data.code == 200){
              this.$message({
              type: 'success',
              message: '修改成功成功!'
          });
          this.$router.push('/home/movie-list')
            }else{
                this.$message({
              type: 'error',
              message: '修改失败'
          });
            }
          }) 
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          });
        }); 
          } else {
            this.$message({
            type: 'warning',
            message: '请完善表单字段'
          });
          }
        });
      },
      },
      mounted () {
        this.loadMovieInfo()
        this.MovieTypes()
      },
    }
</script>

<style>
      .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>